<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城首页</title>

	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <!--顶部导航-->
    <div class="top">
        <div class="center">
            <div class="top-nav">
                <div class="top-navigation">
                    <a href="#">小米商城</a>
                    <span class="spn">|</span>
                    <a href="#">MIUI</a>
                    <span class="spn">|</span>
                    <a href="#">IoT</a>
                    <span class="spn">|</span>
                    <a href="#">云服务</a>
                    <span class="spn">|</span>
                    <a href="#">金融</a>
                    <span class="spn">|</span>
                    <a href="#">有品</a>
                    <span class="spn">|</span>
                    <a href="#">小爱开放平台</a>
                    <span class="spn">|</span>
                    <a href="#">企政服务</a>
                    <span class="spn">|</span>
                    <a href="#">下载app</a>
                    <span class="spn">|</span>
                    <a href="#">Select Region</a>

                </div>
                
                <div class="laned">
                    <a href="#">登陆</a>
                    <span class="spn">|</span>
                    <a href="#">注册</a>
                    
                </div>
 <div class="top-shop">
					 <a href="#"><img src="img/xiaomi/购物车.png" alt="" width="20" height="10">购物车(0)</a>
                </div>
            </div>

        </div>
    </div>
    <div class="center centernav">
        <div class="logo"><img src="img/xiaomi/logo.png" alt=""/></div>
        <div class="nav">
            <ul>
                <li class="blank-li"></li>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">Redmi 红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">空调</a></li>
                <li><a href="#">新品</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
                <li></li>
            </ul>
        </div>
        <div class="search">

            <form action="#" method="get">
                <label for="search"> </label>
				<input type="search" class="search-box" id="search" name="search" value="">
						<img src="img/xiaomi/搜索.png" class="search-submit" value="搜索">
            </form>
        </div>

    </div>
    <div class="center centerban">
        <a href="#">
             <img src="img/xiaomi/Redmi Note 8 (pro).jpg"  class="commodity-img" alt="">
        </a>

        <div class="choose">
            <ul>
                <li><a href="#">手机 电话卡 <span class="choose-spn"></span></a></li>
                <li><a href="#">电视 盒子<span class="choose-spn"></span></a></li>
                <li><a href="#">笔记本 平板<span class="choose-spn"></span></a></li>
                <li><a href="#">家电 插线板<span class="choose-spn"></span></a></li>
                <li><a href="#">出行 穿戴<span class="choose-spn"></span></a></li>
                <li><a href="#">智能 路由器<span class="choose-spn"></span></a></li>
                <li><a href="#">电源 配件<span class="choose-spn"></span></a></li>
                <li><a href="#">健康 儿童<span class="choose-spn"></span></a></li>
                <li><a href="#">耳机 音响<span class="choose-spn"></span></a></li>
                <li><a href="#">生活 箱包<span class="choose-spn"></span></a></li>
            </ul>
        </div>
    </div>
    <div class="center centeradver">
        <div class="rest">
            <ul>
                <li><img src="img/xiaomi/miao.png"  alt=""  width="25" height="25" /><a href="#" class="rest-link"><h3>小米秒杀</h3></a></li>
                <li> <img src="img/xiaomi/qi.png"  alt=""  width="25" height="25" /><a href="#" class="rest-link"><h3>企业团购</h3></a></li>
                <li><img src="img/xiaomi/f.png"  alt=""  width="25" height="25" /><a href="#" class="rest-link"><h3>F码通道</h3></a></li>
				<li><img src="img/xiaomi/fen.png"  alt=""  width="25" height="25" /><a href="#" class="rest-link"></a>
				  <h3><a href="#">米粉卡</a></h3>
				</li>
                <li><img src="img/xiaomi/huan.png"  alt=""  width="25" height="25" /><a href="#" class="rest-link"><h3>以旧换新</h3></a></li>
                <li><img src="img/xiaomi/fei.png"  alt=""  width="25" height="25" /><a href="#" class="rest-link"><h3>话费充值</h3></a></li>
            </ul>
        </div>
        <div class="advertising">
            <ul>
				<li><a href="#"><img src="img/xiaomi/Redmi Note 8.jpg" class="img1" alt=""></a></li>
                <li><a href="#"><img src="img/xiaomi/小米手环4.jpg" class="img1" alt=""></a></li>
                <li><a href="#"><img src="img/xiaomi/Redmi K30.jpg" class="img1" alt=""></a></li>
               
            </ul>
        </div>
    </div>
   
    <div class="center"></div>
    <div class="page-main centermain">
        <h2 class="title"><div style="float:left;">手机</div>
		<div style="text-align:right">查看全部&gt &gt</div>
											 </h2>
        <div class="center centerlist">
            <div class="left-advertising">
                <img src="img/xiaomi/小米MIX Alpha.jpg" alt="" class="left-advertising">
            </div>

            <div class="main-box">
                <ul>
                    <li class="little-box"><a href="#">
                        <div>
                                <img src="img/xiaomi/小米10 青春版 5G.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米8 青春版 4GB+64GB</p>
                                <p class="p-3">潮流镜面渐变色，2400万自拍旗舰</p>
                                <p class="price">1339元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box"><a href="#">
                        <div>
                                <img src="img/xiaomi/小米10屏幕指纹版 6GB+128GB.jpg"  alt="" class="phone-image">
                                <p class="share-h3">小米10 屏幕指纹版 8GB+128GB</p>
                                <p class="p-3">全球首款感压屏幕指纹，双频GPS超...</p>
                                <p class="price">3599元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box"><a href="#">
                        <div>
                                <img src="img/xiaomi/小米9 SE 4GB+64GB.jpg"  alt="" class="phone-image">
                                <p class="share-h3">小米9 SE 4GB+64GB</p>
                                <p class="p-3">AI超感光双摄，三星AMOLED屏幕</p>
                                <p class="price">1499元 <span class="original-price">1799元</span></p>
                            </div>
                        </a></li>
                    <li class="little-box"><a href="#">
                        <div>
                                <img src="img/xiaomi/小米MIX  8S 8GB+256GB.jpg"  alt="" class="phone-image">
                                <p class="share-h3">小米MIX 8S 8GB+256GB</p>
                                <p class="p-3">骁龙845 年度旗舰处理器，艺术品般...</p>
                                <p class="price">1339元 <span class="original-price">3999元</span></p>
                            </div>
                        </a></li>
                    <li class="little-box"><a href="#">
                        <div>
                                <img src="img/xiaomi/小米6X 6GB+128GB.jpg"  alt="" class="phone-image">
                                <p class="share-h3">小米6X 6GB+128GB</p>
                                <p class="p-3">轻薄美观的拍照手机</p>
                                <p class="price">1649 <span class="original-price">1999 元</span></p>
                            </div>
                        </a></li>
                    <li class="little-box"><a href="#">
                        <div>
                                <img src="img/xiaomi/小米Max3 4GB+64GB.jpg"  alt="" class="phone-image">
                                <p class="share-h3">小米Max3 4GB+64GB</p>
                                <p class="p-3"></p>
                                <p class="price">1599元 <span class="original-price">1699元</span></p>
                            </div>
                        </a></li>
                    <li class="little-box"><a href="#">
                        <div>
                                <img src="img/xiaomi/红米99 Pro 3GB+32GB.jpg" alt="" class="phone-image">
                                <p class="share-h3">红米99 Pro 3GB+32GB</p>
                                <p class="p-3"></p>
                                <p class="price">869元 <span class="original-price">999元</span></p>
                            </div>
                        </a></li>
                    <li class="little-box"><a href="#">
                        <div>
                                <img src="img/xiaomi/红米8A 2GB+16GB.jpg" alt="" class="phone-image">
                                <p class="share-h3">红米8A 2GB+16GB</p>
                                <p class="p-3"></p>
                                <p class="price">569元 <span class="original-price">599元</span></p>
                            </div>
                        </a></li>

                </ul>
            </div>
        </div>
        <div class="center">
        <a href="#"><img  src="img/xiaomi/小米电视特惠.jpg" alt="" class="advertising-img" ></a>
        </div>
		</div></body>
	</html>